<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>甘孜</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/hot.css">
    <style>.header .txt{
        line-height:1.5;}
    .share_box{width:100%;height:100%;position:fixed;top:0;left:0;background: rgba(0,0,0,.5);z-index:22;}
    .share_con{width:100%;background-color:#fff;position:fixed;bottom:0;left:0;}
    .share_con ul{margin:1rem 0;}
    .share_con li{width:25%;text-align:center;}
    .share_con .title{width:100%;padding:1.5rem 0;text-align:center;color:#828282;font-size:1.5rem;}
    </style>
</head>
<body>
    <header>

    </header>
    <div id="content-box"><p style="line-height: 3;text-align: center;">加载中...</p></div>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/reqeust.js"></script>
    <script>
        var heardertxt = "MV视频播放",imgArr="";
        $(function () {
            $("header").load("details_header.html");

            template.helper('singers', function (data) {
                var item,res = [];
                for (var i = 0; i < data.length; i++) {
                    res.push(data[i].name);
                }
                return res.join("|");
            });
            var _param = {
                mvId : $C.query().mvId,
                singerId : $C.query().singerId,
                pageIndex : $C.query().pageIndex,
                pageSize : $C.query().pageSize || 10
            }
            //mv详情
            sendByUrl("/GetMVDetail",_param,function(res){
                var data = res.data || {};
                $("#content-box").html(template("video-content-temp", {
                    data: data
                }));
                imgArr = data.singer.length > 0 && data.singer[0].img_url;
                $(".share_open").removeClass("hide");
            });
            $("body").on("click",".share_item",function () {
                var id = $(this).attr("data-id"),
                        title = $(".detail_title").text(),
                        subtitle = $(".detail_content").text(),
                        url = imgArr || "http://www.ganzixinwen.com/uploads/file/2017/0602/20170602060904451.jpg";

                shareInfo(title,subtitle,location.href,url,id);
            });
        })
    </script>
    <script type="text/html" id="video-content-temp">
        <div style="height:100%;">
            <div id="video" style="padding:0;">
                <video controls src="{{data.MVPath}}"
                        webkit-playsinline="true"></video>
                <span class="hide" style="text-align:left;"><img src="images/video_return.png" alt=""></span>
            </div>
        </div>
        <section style="width:100%;margin-top:1rem;overflow:hidden;">
            <div class="video_title">
                <p class="title">
                    <span><b></b>详情</span>
                    <span class="hide"><img src="images/video_share.png" alt="" style="width:40%;"></span>
                </p>
                <p class="title_con">
                    <span class="detail_title">MV-{{data.MVName}}</span>
                    <span class="author detail_content">{{singers(data.singer)}}</span>
                </p>
            </div>
            <!--视频介绍-->
            {{if data.MVDetail}}
            <div class="video_details">
                <p class="introduction"><b></b>视频介绍</p>
                <p class="content">
                    {{#data.MVDetail}}
                </p>
            </div>
            {{/if}}
        </section>
    </script>
</body>
</html>